<style lang="less">
@import '../../styles/table-common.less';
@import '../personInfo.less';
</style>
<style lang="less" scoped>

.icon01 {
    background: rgb(45, 154, 244); border-radius: 50%; padding: 3px
}
.cmr16 {
    margin-right: 16px
}
.cml-35 {
    margin-left: -35px
}

@media (max-width: 1920px) {
    /deep/ .ivu-table .ivu-table-fixed-right{
        height: 98% !important;
    }
    /deep/ .ivu-table .ivu-table-fixed-right  .ivu-table-fixed-body {
    height: 94% !important;
    }
    /deep/ .ivu-table-body {
        height: 94% !important;
    }
}

@media  (min-width: 1921px) and (max-width: 3440px)  {
    /deep/ .ivu-table .ivu-table-fixed-right{
        height: 97% !important;
    }
    /deep/ .ivu-table .ivu-table-fixed-right  .ivu-table-fixed-body {
        height: 92% !important;
    }
    /deep/ .ivu-table-body {
        height: 92% !important;
    }
}
</style>
<template>
    <div class="search">
        <Row :gutter="16" class="all-height">
            <Col :span="showRight ? 18 : 24" class="all-height">
                <Card class="all-height card-child-height">
                    <Row class="operation code-row-bg" style="display: flex; justify-content: space-between">
                        <Col span="22">
<!--                            <Button v-has="'add'" @click="add" type="primary" icon="md-add">添加</Button>-->
                            <Button v-has="'delete'" @click="delAll" icon="md-trash">批量删除</Button>
                            <Button @click="getDataList" icon="md-refresh">刷新</Button>
                            <Button type="dashed" @click="openTip = !openTip">{{ openTip ? '关闭提示' : '开启提示' }}</Button>
                            <Button v-if="resource !== '3'" type="primary" icon="ios-cloud-upload-outline" @click="importFormView = true">导入户口信息</Button>
                            <Modal v-model="importFormView" title="导入户口信息">
                                <Form :model="importForm" :label-width="labelWidth80">
                                    <div>注:导入户口信息时，请先导入生源信息，否则无法导入户口信息。</div>
                                    <FormItem label="文件: ">
                                        <Upload
                                            accept=".xls,.xlsx"
                                            :before-upload="handleUpload">
                                            <Button icon="ios-cloud-upload-outline">点击上传</Button>
                                        </Upload>
                                        <div v-if="importForm.file !== null">
                                            {{ importForm.file.name }}
                                        </div>
                                        <div>说明：请依据模板数据格式导入，文件格式必须为.xlsx</div>
                                    </FormItem>
                                </Form>
                                <div slot="footer">
                                    <Button @click="importFormcCncel">取消</Button>
                                    <Button type="primary" :loading="importing" @click="importFormOk">开始上传</Button>
                                </div>
                            </Modal>
                            <Button @click="downloadTemple" type="info">下载导入模板</Button>
                            <Button v-loading="exportingSelect" @click="dropExportSelect">导出所选数据</Button>
                            <Button v-loading="exportingAll" @click="dropExportAll" >导出全部数据</Button>
                            <Button v-loading="exportingSearch" @click="dropExportSearch" class="mr-auto">下载当前查询数据</Button>
                        </Col>
                        <Col span="2" style="text-align: right">
                            <Icon
                                color="#fff"
                                class="icon01"
                                :type="showRight ? `ios-arrow-forward` : `ios-arrow-back`"
                                @click.native="clickShowRight"
                            ></Icon>
                            <!--              <Button-->
                            <!--                  :icon="showRight?`ios-arrow-forward`:`ios-arrow-back`"-->
                            <!--                  @click.native="clickShowRight"-->
                            <!--                  size="mini"-->
                            <!--                  type="primary">-->
                            <!--              </Button>-->
                        </Col>
                    </Row>
                    <Row v-show="openTip">
                        <Alert show-icon>
                            已选择
                            <span class="select-count">{{ selectList.length }}</span>
                            项
                            <a class="select-clear" @click="clearSelectAll">清空</a>
                        </Alert>
                    </Row>
                    <Row class="calc-px-height">

                        <div v-if="loading" class="wh-100 d-flex-around-center">
                            <Spin></Spin>
                        </div>
                        <div v-else v-ref-height="refHeight" class="wh-100">
<!--                            @on-row-dblclick="sjclaib"-->
                            <el-table
                                :v-loading="listloading"
                                :height="refHeight.value"
                                border
                                :columns="columns"
                                :data="data"
                                empty-text="暂无数据"
                                sortable="custom"
                                @sort-change="changeSort"
                                @selection-change="showSelect"
                                ref="table"
                            >
                                <!--<template slot-scope="{ row, index }" slot="status">
                                    <div class="wh-100">
                                        <span v-if="row.status == 1" >待填报</span>
                                        <span v-if="row.status == 2" >草稿</span>
                                        <span v-if="row.status == 3" >审核中</span>
                                        <span v-if="row.status == 4" >已撤回</span>
                                        <span v-if="row.status == 5" >已驳回</span>
                                        <span v-if="row.status == 6" >审核通过</span>
                                    </div>
                                </template>-->
                                <el-table-column type="selection" width="60" align="center"></el-table-column>
                                <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
                                <el-table-column v-for="column in columns" :label-class-name="column.key" :align="column.align" :key="column.key" :prop="column.key" :label="column.title" :sortable="column.sortable" :width="column.width" :min-width="column.minWidth" :fixed="column.fixed">
                                    <template slot-scope="scope">
                                        <div v-if="column.key == 'status'">
                                            <div class="wh-100">
                                                <span v-if="scope.row.status == 1">待填报</span>
                                                <span v-if="scope.row.status == 2">草稿</span>
                                                <span v-if="scope.row.status == 3">审核中</span>
                                                <span v-if="scope.row.status == 4">已撤回</span>
                                                <span v-if="scope.row.status == 5">已驳回</span>
                                                <span v-if="scope.row.status == 6">审核通过</span>
                                            </div>
                                        </div>
                                        <div v-else-if="column.key == 'importFlag'">
                                            <span v-if="scope.row.importFlag == 0">学生填报</span>
                                            <span v-else-if="scope.row.importFlag == 1">学校导入</span>
                                            <span v-else-if="scope.row.importFlag == 2">学院修改</span>
                                            <span v-else-if="scope.row.importFlag == 3">学校修改</span>
                                        </div>
                                        <div v-else-if="column.key == 'xlcc'">
                                            <div>{{ columnValue(scope.row[column.key], 'xlcc') }}</div>
                                        </div>
                                        <div v-else-if="column.key == 'sydCode'">
                                            <div>{{ columnValue(scope.row[column.key], 'sydCode') }}</div>
                                        </div>
                                        <div v-else-if="column.key == 'houseTransferTypeCode'">
                                            <div>{{ columnValue(scope.row[column.key], 'houseTransferTypeCode') }}</div>
                                        </div>
                                        <div v-else-if="column.key == 'houseTransferLocationCode'">
                                            <div>{{ columnValue(scope.row[column.key], 'houseTransferLocationCode') }}</div>
                                        </div>
                                        <div v-else-if="column.key == 'action'">
                                            <div>
                                            <a :style="{display: handlePermission('edit') ? 'inline-block' : 'none'}" @click="edit(scope.row)">编辑</a>
                                            <Divider type="vertical" />
                                            <a :style="{display: handlePermission('delete') ? 'inline-block' : 'none'}" @click="remove(scope.row)">删除</a>
                                            <Divider type="vertical" />
                                            <a :style="{display: handlePermission('delete') ? 'inline-block' : 'none'}" @click="selectRowData(scope.row)">查看</a>
                                            </div>
                                        </div>
                                        <div v-else>{{ scope.row[column.key] }}</div>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <!-- <div v-else  class="wh-100">
                                <NoData class="wh-100"></NoData>
                            </div> -->
                        </div>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page
                            :current="searchForm.pageNumber"
                            :total="total"
                            :page-size="searchForm.pageSize"
                            @on-change="changePage"
                            @on-page-size-change="changePageSize"
                            :page-size-opts="[10, 20, 50, 100, 200]"
                            size="small"
                            show-total
                            show-elevator
                            show-sizer
                        ></Page>
                    </Row>
                </Card>
            </Col>
            <Col span="6" class="all-height" v-show="showRight">
                <Card class="all-height card-child-height">
                    <Row v-show="!modalVisible" @keydown.enter.native="handleSearch">
                        <div class="drawer-header">
                            <div class="cmr16">查询区</div>
                        </div>
                        <Form ref="searchForm" :model="searchForm" :label-width="labelWidth100" class="marginForm">
                            <FormItem label="姓名" prop="xm" class=" w-95">
                                <Input type="text" v-model="searchForm.xm" placeholder="请输入姓名" clearable style="width: 100%" />
                            </FormItem>
                            <FormItem label="考生号" prop="ksh" class=" w-95">
                                <Input type="text" v-model="searchForm.ksh" placeholder="请输入考生号" clearable style="width: 100%" />
                            </FormItem>
                            <FormItem label="学号" prop="xh" class=" w-95">
                                <Input type="text" v-model="searchForm.xh" placeholder="请输入学号" clearable style="width: 100%" />
                            </FormItem>
                            <FormItem label="身份证号" prop="sfzh" class=" w-95">
                                <Input type="text" v-model="searchForm.sfzh" placeholder="请输入身份证号" clearable style="width: 100%" />
                            </FormItem>
                            <FormItem label="专业" prop="zy"  class=" w-95">
                                <Input type="text" v-model="searchForm.zy" placeholder="请输入专业名称" clearable style="width: 100%"/>
                            </FormItem>
                            <FormItem v-if='resource === "1" || resource === "0"' label="学校" prop="schoolName"  class=" w-95">
                                <Input type="text" v-model="searchForm.schoolName" placeholder="请输入院校名称" clearable style="width: 100%"/>
                            </FormItem>
                            <FormItem label="院系" prop="college"  class=" w-95">
                                <Input type="text" v-model="searchForm.college" placeholder="请输入学院名称" clearable style="width: 100%"/>
                            </FormItem>
                            <FormItem label="学历" prop="college" class=" w-95">
                                <!--                            <Input type="text" v-model="searchForm.xlCode" placeholder="请输入学院名称" clearable style="width: 100%"/>-->
                                <Select   v-model="searchForm.xlcc" clearable placeholder="请选择学历" class="w-100">
                                    <Option v-for="(item,index) in xlList" :value="item.value" :key="index">{{ item.title }}</Option>
                                </Select>
                            </FormItem>
                            <FormItem label="户口迁转类型" prop="houseTransferTypeCode" class=" w-95">
                                <Select   v-model="searchForm.houseTransferTypeCode" clearable placeholder="请输入户口迁转类型" class="w-100">
                                    <Option v-for="(item,index) in accountTypeList" :value="item.value" :key="index">{{ item.title }}</Option>
                                </Select>
                            </FormItem>
                            <FormItem label="户口登记状态" prop="status" class=" w-95">
                                <Select   v-model="searchForm.status" clearable placeholder="请选择户口登记状态" class="w-100">
                                    <Option value="1">待填报</Option>
                                    <Option value="2">草稿</Option>
                                  <Option value="3">待学校审核</Option>
                                  <Option value="20">待院系审核</Option>
                                    <Option value="4">已撤回</Option>
                                    <Option value="5">已驳回</Option>
                                    <Option value="6">已登记</Option>
                                </Select>
                            </FormItem>
                            <FormItem label="毕业时间" prop="transferType"  class="w-95">
                                <DatePicker v-model="searchForm.bysj" class="w-95" clearable @on-change="dateChange" type="month" placeholder="毕业时间" ></DatePicker>
                            </FormItem>
                            <!--              <FormItem label="户口迁转所在地代码" prop="houseTransferLocationCode">-->
                            <FormItem label="生源所在地" prop="transferType"  class=" w-95">
                                <el-cascader
                                    clearable
                                    class="w-100"
                                    v-model="searchForm.houseTransferLocationCode"
                                    :options="locationOfTheUnitList"
                                    :props="provincesAndMunicipalitiesProps"
                                    @change="changeCar"
                                ></el-cascader>
                            </FormItem>
                            <FormItem label="数据来源" prop="importFlag" class="w-95">
                                <Select v-model="searchForm.importFlag" clearable placeholder="请选择数据来源" class="w-100">
                                    <Option value="0">学生填报</Option>
                                    <Option value="1">学校导入</Option>
                                    <Option value="2">学院修改</Option>
                                    <Option value="3">学校修改</Option>
                                </Select>
                            </FormItem>
                            <FormItem class="br box-key">
                                <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                                <Button @click="handleReset">重置</Button>
                            </FormItem>
                        </Form>
                    </Row>
                    <Row v-show="modalVisible" style="flex-direction: column">
                        <div class="drawer-header">
                            <div class="cmr16" >{{ modalTitle }}</div>
                        </div>
                        <Form ref="form" :model="form" :label-width="labelWidth95" :rules="formValidate" label-position="left" class="marginForm">
                            <p class="drawer-title">个人信息</p>
                            <FormItem label="姓名" prop="xm">
                                <Input v-model="form.xm" maxlength="70" readonly />
                            </FormItem>
                            <FormItem label="考生号" prop="ksh">
                                <Input v-model="form.ksh" maxlength="70" readonly />
                            </FormItem>
                            <FormItem label="学号" prop="xh">
                                <Input v-model="form.xh" maxlength="70" readonly />
                            </FormItem>
                            <FormItem label="身份证号" prop="sfzh">
                                <Input v-model="form.sfzh" maxlength="70" readonly />
                            </FormItem>
                            <FormItem label="院校名称" prop="yxmc">
                                <Input v-model="form.yxmc" maxlength="70" readonly />
                            </FormItem>
                            <FormItem label="院系名称" prop="xsh">
                                <Input v-model="form.xsh" maxlength="70" readonly />
                            </FormItem>

                            <!--              <FormItem label="学历层次" prop="xlccmc">-->
                            <!--                <Input v-model="form.xlccmc" clearable maxlength="70" readonly/>-->
                            <!--              </FormItem>-->
                            <Divider />
                            <p class="drawer-title">户口信息</p>
                            <!--              <FormItem label="户口迁转类型代码" prop="houseTransferTypeCode">-->
                            <FormItem label="户口迁转类型" prop="houseTransferTypeCode">
                                <Input v-model="form.houseTransferTypeCode" clearable />
                            </FormItem>
                            <FormItem label="户口迁转地址" prop="houseTransferAddr">
                                <Input v-model="form.houseTransferAddr" clearable />
                            </FormItem>
                            <!--              <FormItem label="户口迁转所在地代码" prop="houseTransferLocationCode">-->
                            <FormItem label="户口迁转所在地" prop="houseTransferLocationCode">
                                <Input v-model="form.houseTransferLocationCode" clearable />
                            </FormItem>
                        </Form>

                        <div class="br right-bottom-edit">
                            <!--              <Button type="text" @click="handleCancel">取消</Button>-->
                            <!--              <Button type="primary" :loading="submitLoading" @click="handleSubmit"-->
                            <!--              >提交-->
                            <!--              </Button-->
                            <!--              >-->
                            <Button type="text" @click="handleCancel">取消</Button>
                            <Button v-has="'edit'" type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
                        </div>
                    </Row>
                </Card>
            </Col>
        </Row>
<!--        <Modal v-model="modalExportAll" title="确认导出" :loading="loadingExport" @on-ok="exportAll">-->
<!--            <p>您确认要导出全部 {{ total }} 条数据？</p>-->
<!--        </Modal>-->
    </div>
</template>

<script>
import uploadPicInput from '@/views/my-components/xboot/upload-pic-input';
import userSelect from '@/views/my-components/xboot/user-select';
import uploadPicThumb from '@/views/my-components/xboot/upload-pic-thumb';
import { shortcuts } from '@/libs/shortcuts';
import {  importDirectionAPI } from '../../api/bys/destinationAfterGraduation';
import { archiveTransferInfoColumns, archiveTransferInfoData } from '../archivesManagement/importArchiveTransferInfoTemplate';
import Cookies from 'js-cookie';
import { newProvincialDataApi } from '../../api/bys';
import { getDictDataByType } from '../../api';
import {
  exportAllAccountTransferInfo,
  exportSearchAccountTransferInfo, exportSelectAccountTransferInfo,
  importAccountTransferInfoAPI
} from '../../api/accountManagement/accountManagementApis';
import  NoData from '@/components/NoData.vue';
import {
  exportAllArchiveTransferInfo, exportSearchArchiveTransferInfo,
  exportSelectArchiveTransferInfo
} from "@/api/archivesManagement/archiveForwardingAddressApis";
import { areaDataApi } from '../../api/common';
export default {
    name: 'residentList',
    components: {
        NoData
    },
    data() {
        return {
            listloading: true,
            labelWidth80: 80,
            labelWidth100: 100,
            labelWidth95: 95,
            refHeight: {value: 0},
            importing: false,
            importing1: false,
            importFormView: false,
            exportingSearch: false,
            exportingSelect: false,
            exportingAll: false,
            importForm: {
                file: null,
                importMode: '1'
            },
            resource: '',
            openSearch: true, // 显示搜索
            openTip: true, // 显示提示
            loading: true, // 表单加载状态
            modalType: 0, // 添加或编辑标识
            modalVisible: false, // 添加或编辑显示
            modalTitle: '', // 添加或编辑标题
            height1: 0,
            searchForm: {
                // 搜索框初始化对象
                pageNumber: 1, // 当前页数
                pageSize: 50, // 页面大小
                sort: 'createTime', // 默认排序字段
                order: 'desc' // 默认排序方式
            },
            form: {
                // 添加或编辑表单对象初始化数据
                // bysId: "",
                houseTransferTypeCode: '',
                houseTransferAddr: '',
                houseTransferLocationCode: ''
            },
            // 表单验证规则
            formValidate: {},
            submitLoading: false, // 添加或编辑提交状态
            selectList: [], // 多选数据
            columns:[],
            columns_1: [
                // 表头
                // {
                //     type: 'selection',
                //     width: 60,
                //     align: 'center'
                // },
                // {
                //     type: 'index',
                //     title: '序号',
                //     width: 60,
                //     align: 'center'
                // },
                {
                    title: '数据来源',
                    minWidth: 100,
                    key: 'importFlag', // 0是学生填报 1是学校导入 2是学院修改 3是学校修改
                    sortable: false,
                    render: (h, params) => {
                        if (params.row.importFlag == 0) {
                            return h('span', '学生填报');
                        } else if (params.row.importFlag == 1) {
                            return h('span', '学校导入');
                        } else if (params.row.importFlag == 2) {
                            return h('span', '学院修改');
                        } else if (params.row.importFlag == 3) {
                            return h('span', '学校修改');
                        }
                    }
                },
                {
                    title: '院校名称',
                    key: 'schoolName',
                    minWidth: 180,
                    sortable: false
                },
                {
                    title: '院系名称',
                    key: 'college',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '专业',
                    key: 'zy',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '姓名',
                    key: 'xm',
                    minWidth: 100,
                    sortable: false
                },
                {
                    title: '身份证号',
                    key: 'sfzh',
                    minWidth: 180,
                    sortable: false
                },
                {
                    title: '考生号',
                    key: 'ksh',
                    minWidth: 140,
                    sortable: false
                },
                {
                    title: '学号',
                    key: 'xh',
                    minWidth: 140,
                    sortable: false
                },
                // {
                //   title: "学历层次",
                //   key: "xlccmc",
                //   minWidth: 120,
                //   sortable: false,
                // },
                {
                    title: "学历",
                    key: "xlcc",
                    minWidth: 90,
                    sortable: false,
                    render: (h, params) => {
                        return h('span', this.xlList.find(item => item.value === params.row.xlcc).title);
                    }
                },
                {
                    title: "毕业时间",
                    key: "bysj",
                    minWidth: 90,
                    sortable: false,
                },
                {
                    title: "生源所在地",
                    key: "sydCode",
                    minWidth: 200,
                    sortable: false,
                    render: (h, params) => {
                        return h('span', this.areaList.find(item => item.code == params.row.sydCode).allName);
                    }
                },
                {
                    // title: "户口迁转类型代码",
                    title: '户口迁转类型',
                    key: 'houseTransferTypeCode',
                    minWidth: 120,
                    sortable: false,
                    render: (h, params) => {
                        return h('span', this.accountTypeList.find(item => item.value == params.row.houseTransferTypeCode).title);
                    }
                },
                {
                    title: '户口迁转地址',
                    key: 'houseTransferAddr',
                    minWidth: 120,
                    sortable: false
                },
                {
                    // title: "户口迁转所在地代码",
                    title: '户口迁转所在地',
                    key: 'houseTransferLocationCode',
                    minWidth: 120,
                    sortable: false,
                    render: (h, params) => {
                        return h('span', this.areaList.find(item => item.code == params.row.houseTransferLocationCode.split(',')[2]).allName);
                    }
                },
                {
                    title: "更新时间",
                    key: "updateTime",
                    minWidth: 180,
                    sortable: false,
                },
                {
                    title: "户口登记状态",
                    slot: "status",
                    key: 'status',
                    align: "center",
                    width: 120,
                    fixed:"right",
                },
                {
                    title: '操作',
                    key: 'action',
                    align: 'center',
                    width: 160,
                    fixed: 'right',
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'a',
                                {
                                    style: {
                                        display: this.hasPermission(this, 'edit') ? 'inline-block' : 'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.row);
                                        }
                                    }
                                },
                                '编辑'
                            ),
                            h('Divider', {
                                props: {
                                    type: 'vertical'
                                },
                                style: {
                                    display: this.hasPermission(this, 'delete') ? 'inline-block' : 'none'
                                }
                            }),
                            h(
                                'a',
                                {
                                    style: {
                                        display: this.hasPermission(this, 'delete') ? 'inline-block' : 'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row);
                                        }
                                    }
                                },
                                '删除'
                            ),
                            h('Divider', {
                                props: {
                                    type: 'vertical'
                                },
                                style: {
                                    display: this.hasPermission(this, 'delete') ? 'inline-block' : 'none'
                                }
                            }),
                            h(
                                'a',
                                {
                                    style: {
                                        display: this.hasPermission(this, 'delete') ? 'inline-block' : 'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.selectRowData(params.row);
                                        }
                                    }
                                },
                                '查看'
                            )
                        ]);
                    }
                }
            ],
            data: [], // 表单数据
            total: 0, // 表单数据总数
            importModalVisible: false,
            importTableData: [],
            importColumns: [],
            uploadfile: {
                name: ''
            },
            reading: false,
            importLoading: false,
            height: 510,
            tempColumns: archiveTransferInfoColumns,
            tempData: archiveTransferInfoData,
            showRight: true,
            accountTypeList: [], // 户口转寄类型
            locationOfTheUnitList: [], // 单位所在地
            // 省市区级联
            provincesAndMunicipalitiesProps: {
                label: 'name',
                value: 'code',
                children: 'children'
            },
            xlList: [],
            areaList: [],

        };
    },
    methods: {
        handlePermission(type) {
            return this.hasPermission(this, type)
        },
        columnValue(data, type) {
            if (type == 'houseTransferTypeCode') {
                let dict = this.accountTypeList.find(item => item.value == data);
                return dict ? dict.title : ''
            } else if (type == 'xlcc') {
                let dict = this.xlList.find(item => item.value == data);
                return dict ? dict.title : ''
            } else if (type == 'sydCode') {
                let dict = this.areaList.find(item => item.code == data);
                return dict ? dict.allName : ''
            } else if (type == 'houseTransferLocationCode') {
                let dict = this.areaList.find(item => item.code == data?.split(',')[2]);
                return dict ? dict.allName : ''
            }
        },
        async getareaData() {
            let res = await areaDataApi()
            if(res.code === 200){
                this.areaList = res.result
                console.log("this.areaList",this.areaList)
            }
        },
        changeCar(){
            this.searchForm.sydCode = this.searchForm.houseTransferLocationCode[2];
        },
        dateChange(data){
            console.log(data)

            this.searchForm.bysj=data.split("-")[0]+data.split("-")[1]
            if(!(data.length>0)){
                this.searchForm.bysj=""
            }
        },
        newObtainTheCascadingDataOfProvincesAndCities(){
            newProvincialDataApi().then((res) =>{
                this.locationOfTheUnitList = res.result;
                console.log("this.locationOfTheUnitList",this.locationOfTheUnitList)
            })
        },
        obtainTheAccountMigrationType(){
            getDictDataByType('file-forwarding-type').then(res => {
                if(res.code === 200){
                    this.accountTypeList=res.result
                }
            });
        },
        async getxlList() {
            let res= await getDictDataByType('eduLevelType')
            if (res.code === 200) {
                this.xlList = res.result
            }
        },
        selectListMe(){
            this.newObtainTheCascadingDataOfProvincesAndCities()
            this.obtainTheAccountMigrationType();
        },
        // region TODO 导入户口信息 下载导入模板
        handleUpload(file) {
            const fileExt = file.name.split('.').pop().toLocaleLowerCase();
            if (!(fileExt == 'xlsx' || fileExt == 'xls')) {
                this.$Notice.warning({
                    title: '文件类型错误',
                    desc: '所选文件‘ ' + file.name + ' ’不是EXCEL文件，请选择后缀为.xlsx或者.xls的文件。'
                });
            } else {
                this.importForm.file = file;
            }
            // this.importForm.file = file;
            return false;
        },
        downloadTemple() {
            window.location.href = process.env.BASE_URL + '户口信息导入模板.xlsx';
        },
        async importFormOk() {
            if (this.importForm.file == null) {
                this.$Message.info('请选择文件');
                return;
            }
            let formData = new FormData();

            // formData.append('importMode', this.importForm.importMode); // 添加参数
            formData.append('file', this.importForm.file);
            this.importing = true;
            importAccountTransferInfoAPI(formData).then(res => {
                if (res.code === 200) {
                    this.$Message.success(res.message);
                } else if (res.code === 201) {
                    this.$Message.success(res.message);
                    const byteArray = Uint8Array.from(atob(res.result), c => c.charCodeAt(0));
                    const blob = new Blob([byteArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
                    // 创建临时 URL 对象
                    const url = URL.createObjectURL(blob);
                    const downloadLink = document.createElement('a');
                    downloadLink.href = url;
                    downloadLink.download = '导入失败数据汇总.xlsx'; // 设置文件名
                    downloadLink.click();
                } else {
                    this.$Message.error(res.message);
                    const byteArray = Uint8Array.from(atob(res.result), c => c.charCodeAt(0));
                    const blob = new Blob([byteArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
                    // 创建临时 URL 对象
                    const url = URL.createObjectURL(blob);
                    const downloadLink = document.createElement('a');
                    downloadLink.href = url;
                    downloadLink.download = '导入失败数据汇总.xlsx'; // 设置文件名
                    downloadLink.click();
                }
                // this.submitLoading = false;
                this.importing = false;
                this.importFormcCncel();
                this.getDataList();
            });
        },
        importFormcCncel() {
            this.importForm.file = null;
            this.importFormView = false;
        },
        // endregion
        tableheig() {
            var bbb = document.getElementsByClassName('calc-px-height')[0].scrollHeight;
            var aaa = document.getElementsByClassName('calc-px-height')[0].children[0].children[0].children[1];
            var ccc = document.getElementsByClassName('calc-px-height')[0].children[0].children[0].children[0].scrollHeight;
            var ddd = bbb - ccc;
            console.log(bbb, '00000000000000');
            aaa.style.height = `${ddd - 4}px`;
        },
        async init() {
            this.getDataList();
            await this.getxlList();
            await this.getareaData();
            this.selectListMe();
        },
        // 显示隐藏右侧区域
        clickShowRight() {
            this.showRight = !this.showRight;
        },
        initCategoryData() {
            // this.getRequest("级联一级数据请求路径，如/category/getByParentId/0").then(res => {
            //   if (res.success) {
            //     res.result.forEach(function(e) {
            //       if (e.isParent) {
            //         e.value = e.id;
            //         e.label = e.title;
            //         e.loading = false;
            //         e.children = [];
            //       } else {
            //         e.value = e.id;
            //         e.label = e.title;
            //       }
            //     });
            //     this.category = res.result;
            //   }
            // });
            // 模拟请求成功
            this.category = [
                {
                    label: '分类1',
                    value: '1',
                    loading: false,
                    children: [
                        {
                            label: '二级分类',
                            value: '1.1'
                        }
                    ]
                },
                {
                    label: '分类2',
                    value: '2'
                }
            ];
        },
        initCategoryForEdit() {
            // this.getRequest("树形一级数据请求路径，如/category/getByParentId/0").then(res => {
            //   if (res.success) {
            //     res.result.forEach(function(e) {
            //       if (e.isParent) {
            //         e.loading = false;
            //         e.children = [];
            //       }
            //     });
            //     this.dataCat = res.result;
            //   }
            // });
            // 模拟请求成功
            this.dataCat = [
                {
                    title: '分类1',
                    id: '1',
                    loading: false,
                    children: [
                        {
                            title: '二级分类',
                            id: '2'
                        }
                    ]
                },
                {
                    title: '分类2',
                    id: '3'
                }
            ];
        },
        loadData(item, callback) {
            // 异步加载搜索框级联类别子节点数据
            // item.loading = true;
            // this.getRequest("请求路径，如/category/getByParentId/" + item.value).then(res => {
            //   item.loading = false;
            //   if (res.success) {
            //     res.result.forEach(function(e) {
            //       if (e.isParent) {
            //         e.value = e.id;
            //         e.label = e.title;
            //         e.loading = false;
            //         e.children = [];
            //       } else {
            //         e.value = e.id;
            //         e.label = e.title;
            //       }
            //       if (e.status == -1) {
            //         e.label = "[已禁用] " + e.label;
            //         e.disabled = true;
            //       }
            //     });
            //     item.children = res.result;
            //     callback();
            //   }
            // });
        },
        loadDataTree(item, callback) {
            // 异步加载编辑添加选择类别树子节点数据
            // this.getRequest("请求路径，如/category/getByParentId/" + item.id).then(res => {
            //   if (res.success) {
            //     res.result.forEach(function(e) {
            //       if (e.isParent) {
            //         e.loading = false;
            //         e.children = [];
            //       }
            //     });
            //     callback(res.result);
            //   }
            // });
        },
        selectTree(v) {
            if (v.length > 0) {
                // 转换null为""
                for (let attr in v[0]) {
                    if (v[0][attr] == null) {
                        v[0][attr] = '';
                    }
                }
                let str = JSON.stringify(v[0]);
                let data = JSON.parse(str);
                this.form.categoryId = data.id;
                this.form.categoryTitle = data.title;
            }
        },
        clearSelectCat() {
            this.form.categoryId = '';
            this.form.categoryTitle = '';
        },
        handleChangeCat(value, selectedData) {
            // 获取最后一个值
            if (value && value.length > 0) {
                this.searchForm.categoryId = value[value.length - 1];
            } else {
                this.searchForm.categoryId = '';
            }
        },
        handleChangeUserFormDep(value, selectedData) {
            // 获取最后一个值
            if (value && value.length > 0) {
                this.form.categoryId = value[value.length - 1];
            } else {
                this.form.categoryId = '';
            }
        },
        changePage(v) {
            this.searchForm.pageNumber = v;
            this.getDataList();
            this.clearSelectAll();
        },
        changePageSize(v) {
            this.searchForm.pageSize = v;
            this.getDataList();
        },
        selectDateRange(v) {
            if (v) {
                this.searchForm.startDate = v[0];
                this.searchForm.endDate = v[1];
            }
        },
        getDataList() {
            // this.loading = true;
            this.listloading = true
            console.log("this.searchForm",this.searchForm);
            // 带多条件搜索参数获取表单数据 请自行修改接口
            this.postRequest('/accountTransferInfo/queryPage', this.searchForm).then(res => {
                console.log(res);
                if (res.success) {
                    let value = res.result;
                    this.data = value.result;
                    this.total = value.total;
                    // this.tableheig();
                }
                this.loading = false;
                this.listloading = false
            });
            // 以下为模拟数据
            //this.data = [
            //];
            // this.total = this.data.length;
            // this.loading = false;
        },

      dropExportSearch(){
        this.exportingSearch = true;
        exportSearchAccountTransferInfo(this.searchForm).then(res => {
          this.exportingSearch = false;
          const blob = new Blob([res], { type: 'charset=utf-8' });
          let url = window.URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          link.setAttribute('download', '户口信息.xlsx');
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link); // 删除节点
          window.URL.revokeObjectURL(url); //释放该 url
        });
        console.log(ids);
      },

      dropExportSelect(){
        let ids = [];
        this.selectList.forEach(function(e) {
          ids.push(e.id)
        });
        this.exportingSelect = true;
        exportSelectAccountTransferInfo({ids: ids}).then(res => {
          this.exportingSelect = false;
          // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
          const blob = new Blob([res], { type: 'charset=utf-8' });
          let url = window.URL.createObjectURL(blob);

          const link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          link.setAttribute('download', '户口信息.xlsx');
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link); // 删除节点
          window.URL.revokeObjectURL(url); //释放该 url
        });
        console.log(ids);
      },

      dropExportAll() {
        this.exportingAll = true;
        exportAllAccountTransferInfo().then(res => {
          this.exportingAll = false;
          // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
          const blob = new Blob([res], { type: 'charset=utf-8' });
          let url = window.URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          link.setAttribute('download', '户口信息.xlsx');
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link); // 删除节点
          window.URL.revokeObjectURL(url); //释放该 url
        });
      },
        handleSearch() {
            this.searchForm.pageNumber = 1;
            this.searchForm.pageSize = 50;
            this.getDataList();
        },
        handleReset() {
            this.$refs.searchForm.resetFields();
            this.searchForm.pageNumber = 1;
            this.searchForm.pageSize = 50;
            this.selectDate = null;
            this.searchForm.startDate = '';
            this.searchForm.endDate = '';
            this.selectCat = [];
            this.searchForm.categoryId = '';
            // 重新加载数据
            this.getDataList();
        },
        changeSort(e) {
            this.searchForm.sort = e.key;
            this.searchForm.order = e.order;
            if (e.order == 'normal') {
                this.searchForm.order = '';
            }
            this.getDataList();
        },
        handleDropdown(name) {
            if (name == 'refresh') {
                this.getDataList();
            } else if (name == 'exportData') {
                if (this.selectList.length <= 0) {
                    this.$Message.warning('您还未选择要导出的数据');
                    return;
                }
                this.$Modal.confirm({
                    title: '确认导出',
                    content: '您确认要导出所选 ' + this.selectList.length + ' 条数据?',
                    onOk: () => {
                        this.$refs.exportTable.exportCsv({
                            filename: '导出数据'
                        });
                    }
                });
            } else if (name == 'exportAll') {
                this.modalExportAll = true;
            }
        },
        exportAll() {
            // this.getRequest("请求获取全部数据接口路径").then(res => {
            //   this.modalExportAll = false;
            //   if (res.success) {
            //     this.exportData = res.result;
            //     setTimeout(() => {
            //       this.$refs.exportTable.exportCsv({
            //         filename: "用户全部数据"
            //       });
            //     }, 1000);
            //   }
            // });
            // 模拟成功
            this.modalExportAll = false;
            this.$refs.exportTable.exportCsv({
                filename: '用户全部数据'
            });
        },
        handleCancel() {
            this.modalVisible = false;
        },
        handleSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.submitLoading = true;
                    if (this.modalType === 0) {
                        // 添加 避免编辑后传入id等数据 记得删除
                        delete this.form.id;
                        this.postRequest('/accountTransferInfo/insertOrUpdate', this.form).then(res => {
                            this.submitLoading = false;
                            if (res.success) {
                                this.$Message.success('操作成功');
                                this.getDataList();
                                this.modalVisible = false;
                            }
                        });
                        // 模拟请求成功
                        // this.submitLoading = false;
                        // this.$Message.success("操作成功");
                        // this.getDataList();
                        // this.modalVisible = false;
                    } else {
                        // 编辑
                        this.postRequest('/accountTransferInfo/insertOrUpdate', this.form).then(res => {
                            this.submitLoading = false;
                            if (res.success) {
                                this.$Message.success('操作成功');
                                this.getDataList();
                                this.modalVisible = false;
                            }
                        });
                        // 模拟请求成功
                        // this.submitLoading = false;
                        // this.$Message.success("操作成功");
                        // this.getDataList();
                        // this.modalVisible = false;
                    }
                }
            });
        },
        add() {
            this.modalType = 0;
            this.modalTitle = '添加';
            this.$refs.form.resetFields();
            this.modalVisible = true;
        },
        sjclaib(v) {
            this.showRight = true;
            this.modalType = 1;
            this.modalTitle = '编辑区';
            this.$refs.form.resetFields();
            // 转换null为""
            for (let attr in v) {
                if (v[attr] == null) {
                    v[attr] = '';
                }
            }
            let str = JSON.stringify(v);
            let data = JSON.parse(str);
            this.form = data;
            this.modalVisible = true;
        },
        edit(v) {
            this.$router.push({name: 'AccountEdit' ,params:{row:v}})
            // this.modalType = 1;
            // this.modalTitle = '编辑区';
            // this.$refs.form.resetFields();
            // // 转换null为""
            // for (let attr in v) {
            //     if (v[attr] == null) {
            //         v[attr] = '';
            //     }
            // }
            // let str = JSON.stringify(v);
            // let data = JSON.parse(str);
            // this.form = data;
            // this.modalVisible = true;
        },
        enable(v) {
            this.$Modal.confirm({
                title: '确认启用',
                // 记得确认修改此处
                content: '您确认要启用 ' + v.name + ' ?',
                loading: true,
                onOk: () => {
                    // this.postRequest("请求路径/" + v.id).then(res => {
                    //   this.$Modal.remove();
                    //   if (res.success) {
                    //     this.$Message.success("操作成功");
                    //     this.getDataList();
                    //   }
                    // });
                    //模拟成功
                    this.$Message.success('操作成功');
                    this.$Modal.remove();
                    this.getDataList();
                }
            });
        },
        disable(v) {
            this.$Modal.confirm({
                title: '确认禁用',
                // 记得确认修改此处
                content: '您确认要禁用 ' + v.name + ' ?',
                loading: true,
                onOk: () => {
                    // this.postRequest("请求路径/" + v.id).then(res => {
                    //   this.$Modal.remove();
                    //   if (res.success) {
                    //     this.$Message.success("操作成功");
                    //     this.getDataList();
                    //   }
                    // });
                    //模拟成功
                    this.$Message.success('操作成功');
                    this.$Modal.remove();
                    this.getDataList();
                }
            });
        },
        remove(v) {
            let param = {
                ids: v.id
            };
            this.$Modal.confirm({
                title: '确认删除',
                // 记得确认修改此处
                render: (h) => {
                    return h('div', [
                        h('p', '您确认要删除该条数据吗?（'+v.xm+',身份证号:'+v.sfzh+'）'),
                        h('p', { style: '' }, '注:删除即清空该学生的户口相关信息，基本信息不删除！')
                    ]);
                },                loading: true,
                onOk: () => {

                    // 删除
                    if(v.status == 1 || v.status == 6){
                        this.postRequest('/accountTransferInfo/delByIds', param).then(res => {
                            this.$Modal.remove();
                            if (res.success) {
                                this.$Message.success('操作成功');
                                this.clearSelectAll();
                                this.getDataList();
                            }
                        });
                    }else{
                        this.$Message.error("非待填报和审核通过的数据无法删除！");
                        this.$Modal.remove();
                        this.clearSelectAll();
                        this.getDataList();
                    }


                }
            });
        },
        selectRowData(row){
            this.$router.push({name: 'AccountSelect' ,params:{row:row}})
        },
        dropDown() {
            if (this.drop) {
                this.dropDownContent = '展开';
                this.dropDownIcon = 'ios-arrow-down';
            } else {
                this.dropDownContent = '收起';
                this.dropDownIcon = 'ios-arrow-up';
            }
            this.drop = !this.drop;
        },
        showSelect(e) {
            this.exportData = e;
            this.selectList = e;
        },
        clearSelectAll() {
            this.$refs.table.clearSelection();
        },
        delAll() {
            if (this.selectList.length <= 0) {
                this.$Message.warning('您还未选择要删除的数据');
                return;
            }
            this.$Modal.confirm({
                title: '确认删除',
                render: (h) => {
                    return h('div', [
                        h('p', "您确认要删除所选的 " + this.selectList.length + " 条数据?",),
                        h('p', { style: '' }, '注:删除即清空该学生的户口相关信息，基本信息不删除。'),
                        h('p', { style: 'color:red' }, '说明：非待填报和审核通过的数据也无法删除，系统会跳过这些数据！')

                    ]);
                },                loading: true,
                onOk: () => {
                    let ids = '';
                    this.selectList.forEach(function (e) {
                        ids += e.id + ',';
                    });
                    ids = ids.substring(0, ids.length - 1);
                    // 批量删除
                    this.postRequest('/accountTransferInfo/delByIds', { ids: ids }).then(res => {
                        this.$Modal.remove();
                        if (res.success) {
                            this.$Message.success('操作成功');
                            this.clearSelectAll();
                            this.getDataList();
                        }
                    });
                }
            });
        },
        onRestWindow() {
          this.columns = this.restTableCellWidth(this.columns_1)
          this.labelWidth80 = this.searchLabelWidth(this.labelWidth80)
          this.labelWidth100 = this.searchLabelWidth(this.labelWidth100)
          this.labelWidth95 = this.searchLabelWidth(this.labelWidth95)
      },
    },
     mounted() {
        this.onRestWindow()
        window.addEventListener('resize',this.onRestWindow)

        this.resource = JSON.parse(Cookies.get('userInfo')).resource;
        this.init();
    },
    beforeDestroy() {
        window.removeEventListener('resize',this.onRestWindow)
    },
};
</script>
<style lang="less" scoped>
// 重构样式
/deep/ .ivu-form-item-label{
    display: flex;
    justify-content: right;
    width: 150px !important;
}
/deep/ .ivu-form-item {
    width: 100%;
    margin-bottom: 0.1rem;
    margin-right: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/deep/ .ivu-form-item-content {
    width: 100% !important;
    margin-left: 0 ! important;
}
/deep/ .ivu-select {
    width: 100% !important;
}
/deep/ .ivu-date-picker {
    width: 100% !important;
}
/deep/ .br {
    margin-top: 15px;
    bottom: 0.12rem !important;
    .ivu-form-item-content {
        display: flex;
    }
}
/deep/ .ivu-input-type-textarea,/deep/ .ivu-input {
    height: calc(100% - 7px) !important;
}
.flex-1 {
    height: 100%;
}
/deep/ .ivu-drawer-body {
    overflow: hidden;
    .d-flex-align-center {
        height: fit-content !important;
        margin-left: 0 !important;
        justify-content: right;
        box-sizing: border-box;
        padding-right: 7px;
    }
}
.box-key {
    /deep/ .ivu-form-item-content {
        margin-left: 100px !important;
    }
}
</style>
